<template>
	<view class="u-p-l-20 u-p-r-20 u-p-t-20">
		<view class="content">
			<sl-filter :ref="'slFilter'" :topFixed="true" :isTransNav="true" :navHeight="0" :color="titleColor" :themeColor="themeColor" :menuList="menuList"
			 @result="result"></sl-filter>
		</view>
		<view class="u-p-t-30 u-p-b-30">
			<u-section title="最新上榜"  :show-line="false" :bold="false" font-size="32"></u-section>
		</view>
		<view>
			<view class="skill-sequence-panel-content-wrapper">
				<scroll-view scroll-x="true" class="kite-classify-scroll">
					<view class="kite-classify-cell" @click="wantUp()">
						<image src="../../static/img/index/ic_wall_add.png" class="wall-add"></image>
						<view class="u-main-color">我要上榜</view>
					</view>
					<view class="kite-classify-cell" v-for="(item, index) in curriculum" :key="index">
						<view class="main-flex cell-view">
							<view class="main-flex cell-img" @click="skip(item.code)">
								<image :src="item.src"></image>
							</view>
						</view>
						<view class="u-main-color">编号：{{item.code}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="u-p-t-50 u-p-b-30">
			<view class="section">
				<view class="section-title">
					推荐单身
					<u-image width="32rpx" height="32rpx" :src="ic_liebiao"
					class="u-m-l-60"></u-image>
				</view>
				<view class="section-right">
					最新
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view>
			<view v-for="(item, index) in flowList" :key="index">
			    <u-lazy-load :image="item.avatar" img-mode="aspectFill"
				height="500" @click="skip(item.userId)"></u-lazy-load>
			    <view class="item-title">
					编号:{{item.userId}}
					<u-image v-if="item.sex === '1'" width="30rpx" height="30rpx" :src="label_woman" class="ic-img"></u-image>
					<u-image v-else-if="item.sex === '0'" width="30rpx" height="30rpx" :src="label_man" class="ic-img"></u-image>
				</view>
				<view class="item-content">{{item.userAge}}岁
				<view class="item-line"></view>{{item.userNation}}
				<view class="item-line"></view>{{item.userHeight}}cm
				<view class="item-line"></view>{{findVal(userEduList, item.userEdu)}}
				<view class="item-line"></view>{{findVal(incomeList, item.userIncome)}}</view>
			    <view class="item-desc item-bottom">{{findVal(vocationList, item.vocation)}}
				<view class="item-line"></view>{{item.userGradu}}
				<view class="item-line"></view>{{findVal(userMarrList,item.userMarr)}}</view>
			</view>
		</view>
		<view v-if="showBottom" style="text-align: center;">已经到底了~~~</view>
	</view>
</template>

<script>
	import { listUser,updateUserProfile } from "@/api/system/user"
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	import {getDicts,findVal} from "@/api/system/data.js"
	import config from "@/config.js" 
	import storage from '@/utils/storage'
	export default {
		components: {
		            slFilter
		        },
		data() {
			return {
				findVal,
				incomeList: [],
				vocationList:[],
				userEduList:[],
				userMarrList:[],
				showBottom:false,
				pageNum: 1, // 当前页码
				pageSize: 10,
				user:{
					userId:null,
					userUp:null
				},
				params : {
					userType: "00",
					pageNum: null,
					pageSize: null,
					orderByColumn: "createTime",
					isAsc: "desc",
					sex:"",
					vocationList:[],
					userEdu:"",
					userIncome:"",
					userHeightStart:null,
					userHeightEnd:null
				},
				ic_liebiao:'https://api.citymiai.com/media/common/images/ic_liebiao.png',
				label_woman:'https://api.citymiai.com/media/common/images/label_woman.png',
				label_man:'https://api.citymiai.com/media/common/images/label_man.png',
				curriculum: [],
				flowList: [],
				themeColor: '#fe3ea5',
				titleColor: '#666666',
				menuList: [
				    {
				        'title': '性别',
				        'isMutiple': false,
				        'key': 'sex',
						'isSort': true,
				        'detailList': [
				            {
				                'title': '不限',
				                'value': ''
				            },
				            {
				                'title': '男',
				                'value': '0'
				            },
				            {
				                'title': '女',
				                'value': '1'
				            }
				        ]
				    },
				    {
				        'title': '职业',
				        'key': 'vocation',
				        'isMutiple': true,
				        'detailList': [
				            {
				                'title': '不限',
				                'value': ''
				            }
				        ]
				    },
				    {
				        'title': '学历',
				        'key': 'userEdu',
				        'isMutiple': true,
				        'detailList': [
				            {
				                'title': '不限',
				                'value': ''
				            }
				        ]
				    },{
				        'title': '收入',
				        'key': 'userIncome',
				        'isMutiple': false,
						'isSort': true,
				        'detailList': [
				            {
				                'title': '不限',
				                'value': ''
				            }
				        ]
				    },{
				        'title': '身高',
				        'key': 'userHeight',
				        'isMutiple': false,
						'isSort': true,
				        'detailList': [
							{
							    'title': '不限',
							    'value': '0'
							},
				            {
				                'title': '155~165cm',
				                'value': '155'
				            },
				            {
				                'title': '166~175cm',
				                'value': '166'
				            },
				            {
				                'title': '176~185cm',
				                'value': '176'
				            },
				            {
				                'title': '186~195cm',
				                'value': '186'
				            },
				            {
				                'title': '196cm以上',
				                'value': '196'
				            }
				        ]
				    }
				]
			}
			
		},
		onLoad() {
			// 获取数据
			this.findUserList();
			this.findUserUpList();
		},
		onUnload() {
			
		},
		onPageScroll(e) {
		    this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			if(!this.showBottom){
				this.loadStatus = 'loading';
				// 获取数据
				this.pageNum++;
				this.findUserList()
			}
		    
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 获取数据
		this.flowList=[];
		this.pageNum=1;
		this.showBottom = false;
		this.findUserList();
		
		},
		onReady() {
			getDicts("in_come").then(res=>{
					 let rows = res.data;
					 if(rows.length > 0){
						 let course = {};
						 let dataItem =[];
						 course.title ='不限';
						 course.value='';
						 dataItem.push(course);
					 	for (let i=0; i<rows.length; i++) {
					 		this.incomeList.push({
					 			title: rows[i].dictLabel,
					 			value: rows[i].dictValue
					 		})
							dataItem.push({
					 			title: rows[i].dictLabel,
					 			value: rows[i].dictValue
					 		})
					 	}
						let menuListItem = {
							'title': '收入',
							'isMutiple': false,
							'key': 'userIncome',
							'isSort':true,
							'defaultSelectedIndex': 0,
							'detailList':dataItem
						}
						this.menuList[3] = menuListItem;
						this.$refs.slFilter.resetMenuList(this.menuList)
					 }
			});
			getDicts("occupation").then(res=>{
					 let rows = res.data;
					 if(rows.length > 0){
						let course = {};
						let dataItem =[];
						course.title ='不限';
						course.value='';
						dataItem.push(course);
					 	for (let i=0; i<rows.length; i++) {
					 		this.vocationList.push({
					 			title: rows[i].dictLabel,
					 			value: rows[i].dictValue
					 		})
							dataItem.push({
					 			title: rows[i].dictLabel,
					 			value: rows[i].dictValue
					 		})
					 	}
						let menuListItem = {
							'title': '职位',
							'isMutiple': true,
							'key': 'vocation',
							'detailList':dataItem
						}
						this.menuList[1] = menuListItem;
						this.$refs.slFilter.resetMenuList(this.menuList)
					 }
			});
			getDicts("education").then(res=>{
					 let rows = res.data;
					 if(rows.length > 0){
						 let course = {};
						 let dataItem =[];
						 course.title ='不限';
						 course.value='';
						 dataItem.push(course);
					 	for (let i=0; i<rows.length; i++) {
					 		this.userEduList.push({
					 			title: rows[i].dictLabel,
					 			value: rows[i].dictValue
					 		})
							dataItem.push({
								title: rows[i].dictLabel,
								value: rows[i].dictValue
							})
					 	}
						let menuListItem = {
							'title': '学历',
							'isMutiple': false,
							'isSort':true,
							'key': 'userEdu',
							'defaultSelectedIndex': 0,
							'detailList':dataItem
						}
						this.menuList[2] = menuListItem;
						this.$refs.slFilter.resetMenuList(this.menuList)
					 }
			});
			getDicts("hunyin").then(res=>{
					 let rows = res.data;
					 if(rows.length > 0){
					 	for (let i=0; i<rows.length; i++) {
					 		this.userMarrList.push({
					 			title: rows[i].dictLabel,
					 			value: rows[i].dictValue
					 		})
					 	}
					 }
			});
		},
		methods: {
			skip(userId){
				this.$tab.navigateTo('/pages/index/userIndex?userId=' + userId)
			},
			wantUp(){
				if(this.user.userUp==null){
					this.user.userUp = 1;
					updateUserProfile(this.user).then(response => {
					  this.$modal.msgSuccess("申请上榜成功，请等待审批")
					})
					
				}else{
					this.$modal.msgSuccess("已申请上榜，请等待审批")
				}
				
			},
			result(val) {
				this.params.sex = val.sex;
				this.params.userEdu = val.userEdu;
				this.params.userIncome = val.userIncome;

				if(val.userHeight!=""&&val.userHeight!="0"){
					this.params.userHeightStart =  parseInt(val.userHeight);
					if(parseInt(val.userHeight)<196){
						this.params.userHeightEnd = parseInt(val.userHeight)+10;
					}
					
				}else{
					this.params.userHeightStart =  0;
					this.params.userHeightEnd = 0;
				}
				this.params.vocationList = val.vocation;
				this.pageNum = 1;
				this.flowList = [];
				this.findUserList();
			},
			findUserList() {
				this.params.pageNum = this.pageNum;
				this.params.pageSize = this.pageSize;
				listUser(this.params).then(response => {
					if (response.code === 200) {
						if(response.rows.length!==this.pageSize){
							this.showBottom=true;
						}
						let rows = response.rows;
						if(rows.length > 0){
							for (let i=0; i<rows.length; i++) {
								if(rows[i].avatar!=null&&rows[i].avatar!=""){
									rows[i].avatar =config.baseUrl + rows[i].avatar;
								}else{
									rows[i].avatar =config.baseUrl + '/profile/default.jpg';
								}
								this.flowList.push(rows[i])
							}
						}
					}
				});	
				// 关闭刷新
				uni.stopPullDownRefresh();
			},
			//获取上榜人员列表
			findUserUpList() {
				let queryParams = {
					userType: "00",
					userUp:1,
					userExam:1,
					pageNum: 1,
					pageSize: 4,
					orderByColumn: "createTime",
					isAsc: "desc",
				}
				listUser(queryParams).then(response => {
					this.curriculum=[];
					if (response.code === 200) {
						let rows = response.rows;
						if(rows.length > 0){
							for (let i=0; i<rows.length; i++) {
								if(rows[i].avatar!=null&&rows[i].avatar!=""){
									rows[i].avatar =config.baseUrl + rows[i].avatar;
								}else{
									rows[i].avatar =config.baseUrl + '/profile/default.jpg';
								}
								let course = {};
								course.src =rows[i].avatar;
								course.code=rows[i].userId;
								this.curriculum.push(course)
							}
						}
					}
				});	
				// 关闭刷新
				uni.stopPullDownRefresh();
			},
		}
	}
</script>

<style>
	page{
		background-color:#FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.section{
		display: flex;justify-content: space-between;
		.section-title{
			font-size: 32rpx;color: #303133;display: flex;justify-content:center;align-items: center;
		}
		.section-right{
			font-size: 28rpx;color: #909399;
		}
	}
	
	.kite-classify-scroll {
		width: 100%;
		height: 165rpx;
		overflow: hidden;
		white-space: nowrap;
		.wall-add{
			width: 120rpx;height: 120rpx;border-radius: 100%;
		}
	}
	
	.kite-classify-cell {
		display: inline-block;
		width: 150rpx;
		height: 165rpx;
		margin-right: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
		.cell-view{
			width: 120rpx;height: 120rpx;background:linear-gradient(to bottom,#fe3ea5,#FFA500);border-radius: 100%;
			.cell-img{
				width: 115rpx;height: 115rpx;background:#FFFFFF;border-radius: 100%;
				image{
					width: 105rpx;height: 105rpx;border-radius: 100%;
				}
			}
		}
	}	
	
	.ic-img{
		display: inline-block;margin-left: 15rpx;line-height: 30rpx;
	}
</style>
